﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>微分享-首页</title>
    <meta name="description" content="微分享-后台管理系统"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" th:href="@{/static/img/favicon.ico}" />
    <link th:href="@{/static/styles/CustomerIndex.css}" type="text/css" rel="stylesheet"/>
    <link th:href="@{/static/styles/global.css}" type="text/css" rel="stylesheet"/>
	<link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}"/>
	<link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}"/>
	<link rel="stylesheet" th:href="@{/static/css/templatemo_misc.css}"/>
	<link rel="stylesheet" th:href="@{/static/css/templatemo_style.css}"/>
    <script type= "text/javascript" th:src="@{/static/assets/js/jquery.min.js}"></script>
    <script type= "text/javascript" th:src="@{/static/js/public.js}"></script>
    <script type= "text/javascript" th:src="@{/static/js/jquery.lightbox.js}"></script>
	<script type= "text/javascript" th:src="@{/static/js/templatemo_custom.js}"></script>
	<script type= "text/javascript" th:src="@{/static/assets/js/amazeui.ie8polyfill.min.js}"></script>
	<script type= "text/javascript" th:src ="@{/dwr/util.js}"></script>   
	<script type="text/javascript"  th:src= "@{/dwr/engine.js}"></script > 
	<script type="text/javascript"  th:src= "@{/dwr/interface/NoticeContentController.js}"></script>
	<script type="text/javascript"  th:src= "@{/static/js/dwrhelp.js}"></script>
    <script type= "text/javascript" th:src="@{/static/script/CustomerIndex.js}"></script>
    <script type= "text/javascript" th:src="@{/static/script/trim.js}"></script>
</head>
<body style="filter:alpha(opacity=100)" id="totop">
<!-- 总容器 container开 始-->
<div id="hahah">
    <div id="container">
        <!-- topDIV 开始 -->
        <!-- topDIv 结束-->
        <!-- 内容总容器 mainDIV 开 始-->
        <div id="main">
            <!-- 左侧mainBannerDIV 开始 -->
            <div id="mainBanner">
                <!-- mainBannerTop DIV 开始 -->
                <div id="mainBannerTop">
                    <!--id=mainBannerTopIssue 发布框-->
                    <div id="mainBannerTopIssue">
                        <!--id=mainBannerTopIssuePoint 提示-->
                        <div id="mainBannerTopIssuePoint"><span
                                style="color: #0a6999;font-size: 20px;"><strong>添加分享</strong></span>
                        </div>
                            <div style="float:right;">您还可以输入<font id="counter1" style="color: red">140</font>字！
                            </div>
                            <div id="mainBannerTopIssueForm">
                                <!--id="mainBannerTopIssueFrame-->
                                <form id="pictureshareform" class="am-form" action="picture_share" method="post"
                                      enctype="multipart/form-data">
                                    <div id="mainBannerTopIssueFrame">
                                        <textarea name="remark" rows="4" class="Size" id="remark"
                                                  style="overflow:hidden;border:1px #0CF solid;"
                                                  onkeyup="calNum(this,counter1,0)"></textarea>
                                    </div>
                                    <input name="page"  value="all_share"  hidden="true"/>
                                    <!--id="mainBannerTopIssueInsert 插入链接-->
                                    <div id="mainBannerTopIssueInsert">
                                        <!--4个小div-->
                                    </div>
                                    <!--确认发布-->
                                    <div id="mainBannerTopIssueSure">
                                        <div id="mainBannerTopIssueSure2">
                                            <div id="pictureContent" style="float:left; height: 80px"></div>
                                            <input type="button" value="添加图片"
                                                   style="width: 80px; height: 30px;background-color:#3295E6; border:none;vertical-align: middle"
                                                   onclick="addPictureInput()"/>
                                            <input type="button" value="发布"
                                                   style="width: 80px; height: 30px;background-color:#3295E6; border:none; vertical-align: middle"
                                                   onclick="submitPictureShare()"/>
                                        </div>
                                    </div>
                                </form>
                            </div>
                    </div>
                    <!-- 表情DIV -->
                </div>

                <!--id="mainBannerTitle 首页-->
                <div id="mainBannerTitle">
                    <!--id="mainBannerTitleWord"-->
                    <div id="mainBannerTitleWord"><b><span
                            style="color: #0a6999;font-size: 15px;"><strong>首页</strong></span></b>
                    </div>
                </div>
                <!--不同人的内容-->
                <div id="shareContent">
                    <!--个人展示-->

                    <!--个人展示结束-->
                </div>

            </div>
        </div>
        <!-- 左侧mainBanner DIV 结束-->
        <!-- 右侧mainRight DIV开始 -->
        <div id="mainRight">
            <table width="50px" border="0" cellpadding="0" cellspacing="0" bgcolor="#E9F4FA">
                <tr>
                    <td bgcolor="#E9F4FA">
                        <!-- 右侧mainRightPostionFirstLine DIV 开始 -->
                        <div id="mainRightPostionFirstLine">
                            <!-- 右侧mainRightPostionFirstLineIcon DIV 开始 -->
                            <div style="height:58px;">
                                <div id="mainRightPostionFirstLineIcon">
                                    <a href="my_share"><img id="photo" th:src="${session.userId == null} ? ${'/static/user/0'} : ${'/static/user/' + session.userId}"    alt=""
                                                                 width="48" height="48"
                                                                 border="0"/></a>
                                </div>
                                <!-- 右侧mainRightPostionFirstLineIcon DIV 结束 -->
                                <!-- 右侧mainRightPostionFirstLineWord1 DIV 开始 -->
                                <div id="mainRightPostionFirstLineWord1">
                                    &nbsp;<font color="#005DC3"><b><a href="my_share"
                                                                      class="a1">
                                   <span th:text="${session.userName}"></span>
                                </a></b></font><br/>
                                </div>
                            </div>
                        </div>
                        <!-- 右侧mainRightPostionFirstLine DIV 结束 -->
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#E9F4FA">
                        <!-- 右侧mainRightPostionSecondLine DIV 开始 -->
                        <div id="mainRightPostionSecondLine">
                            <!-- 右侧mainRightPositionSecondLineContent DIV 开始 -->
                            <div id="mainRightPositionSecondLineContent">
                                <a href="all_share" class="a1"><font
                                        style="font-size:16px;font-weight:700; color:#000;">首页</font></a><br/>
                                <a href="my_share?type=own" class="a1"><font class="style3">我的分享</font></a>
                                <a href="setting" class="a1"><font class="style3">设置</font></a>
                                <a href="login" class="a1"><font class="style3">管理员登陆</font></a>
                            </div>
                            <!-- 右侧mainRightPositionSecondLineContent DIV 开始 -->
                        </div>
                        <!-- 右侧mainRightPostionSecondLine DIV 结束 -->
                    </td>
                </tr>
            </table>
        </div>
        <!-- 右侧mainRightDiv 结束 -->
    </div>
    <!-- 回复DIV 开始 -->
    <!-- 内容总容器 mainDIV 结束-->

    <!-- footer部分 -->

    <!-- footer部分结束 -->
</div>
<!--总容器 container结束-->
<p id="backtop"><a id="backtop1" href="#totop"><span></span>回到顶部</a></p>

<script>
    /*<![CDATA[*/
    function addPictureInput() {
        $("#pictureContent").append("<input style='float: left;width: 100px' type=\"file\" name=\"pictures\">");
    }

    function loadS(url) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        document.head.appendChild(script);
    }

    function updatePictureDiv(files, n) {
        if (files.length == 0) {
        } else {
            for (var i = 0; i < files.length; i++) {
                $("#picture_content" + n).append("<div class=\"col-md-2 col-sm-6\" style='width: 130px'>\n" +
                        "                            <div class=\"gallery-item\">\n" +
                        "                                <div class=\"image\">\n" +
                        "                                    <div class=\"overlay\" style=\"display: none;\">\n" +
                        "                                        <a href=\"/fileupload/" + files[i] + "\" data-rel=\"lightbox\" class=\"fa fa-expand\"></a>\n" +
                        "                                    </div>\n" +
                        "                                    <img src=\"/fileupload/" + files[i] + "\" alt=\"image 2\" style='height: 80px; width: 80px;'>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"content-gallery\"></div>\n" +
                        "                            </div>\n" +
                        "                        </div>");
            }
            loadS("static/js/templatemo_custom.js");
        }
    }
    
    function updateCommentDiv(comments, n) {
        if (comments.length == 0) {
        } else {
            for (var i = 0; i < comments.length; i++) {
                $("#comment_content" + n).append("<span style='color: #0a6999; font-size: 10px'>" + comments[i].userName + "</span>" + "<span style='color: #4b4b4b;font-size: 10px;'>&nbsp;&nbsp;&nbsp;&nbsp;" + comments[i].createdOn + "</span>" +
                        "<br><span style='font-size: 12px;'>" + comments[i].comment + "</span><br>");
            }
        }
    }

    function updateTextDiv(json) {
        for (var i = 0; i < json.length; i++) {
            $("#shareContent").append("<div id=\"mainBannerContent\">" +
                    "<div class=\"stateShow\">\n" +
                    "                        <div class=\"stateShowWord\">\n" +
                    "                            <table width=\"450\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"stateTable\">\n" +
                    "                                <tr>\n" +
                    "                                    <td width=\"380\">\n" +
                    "                                        <a href=\"users_share?type=user&userId=" + json[i].userId + "\">" + json[i].userName + "</a>\n" + "<span style='font-size: 10px; color: inherit'>" + json[i].createdOn + "</span>" +
                    " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
                    "                                       <div onclick='addComment(" + i + ")' style='float: right'><img src=\"static/images/1.gif\" align=\"absmiddle\" style=\"border:none;\"/><span style='font-size: 12px;color: inherit'>添加评论</span></div>\n" +
                    "                                        <p>" + json[i].remark + "</p>\n" +
                    "                                    </td>\n" +
                    "                                </tr>\n" +
                    "                            </table>\n" +
                    "                        </div>\n" +
                    "                        <ul>\n" +
                    "                            <div id=\"picture_content" + i + "\" class=\"container-fluid\" align=\"center\">\n" +
                    "                            </div>\n" +
                    "                            <textarea id='comment" + i + "' style=\"overflow:hidden;border:1px #0CF solid; width: 500px; font-size: 15px;\" rows='2'></textarea>" +
                    "                            <div id=\"comment_content" + i + "\" class=\"container-fluid\" align=\"left\">\n" +

                    "                            </div>\n" +
                    "                        </ul>\n" +
                    "\n" +
                    "<input type='hidden' id='pictureShareId" + i + "' value=" + json[i].id + ">" +
                    "                    </div></div>"
            )
            ;
            updatePictureDiv(json[i].fileURLList, i);
            updateCommentDiv(json[i].commentDtoList, i);
        }
        $("#shareContent").append("<div id=\"footer\">\n" +
                "        <!-- footer网站链接部分 -->\n" +
                "        <!-- footer网站链接部分结束 -->\n" +
                "        <!-- footer网站版权信息 -->\n" +
                "        <div id=\"footerCopy\">\n" +
                "            周航@成都信息工程大学, All Rights Reserved.\n" +
                "        </div>\n" +
                "        <!-- footer网站版权信息结束 -->\n" +
                "    </div>");
    }

    $.ajax({
        url: "/picture_share_list",
        data: {
            pageNo: 1,
            pageSize: 10
        },
        success: function (msg) {
      		if (msg.success) {
                var json = msg.result;
                updateTextDiv(json);
            }
        }
    });

    function addComment(i) {
       if ($("#comment" + i).val() == null || $("#comment" + i).val() == "" || $("#comment" + i).val() == 'undefined') {
            alert("请输入有效信息");
        } else {
            $.ajax({
                url: "/comment",
                data: {
                    comment: encodeURI($("#comment" + i).val()),
                    pictureShareId: $("#pictureShareId" + i).val()
                },
                success: function (msg) {
                    if (msg) {
                        alert("评论成功");
                        window.location.reload();
                    }
                }
            });
        }
    }
    
    function submitPictureShare() {
            $("#pictureshareform").attr('action',  "/picture_share");
            if ($("#remark").val() == null || $("#remark").val() == "") {
                alert("请输入有效信息");
            } else {
                $("#pictureshareform").submit();
            }
    }
    /*]]>*/
</script>
</body>
</html>
